<template>
	<div class="main">
		<div class="title">
			Overview
		</div>

		<div >
<!--			<div class="overview">-->
<!--				<div class="coreWarp" v-for="(n, i) in rnaTypeInfo" :key="i">-->
<!--					<div class="name">{{n.rna_type}} : </div>-->
<!--					<div class="value">{{n.num}}</div>-->
<!--&lt;!&ndash;					<div class="name">{{n.rna_type}}</div>&ndash;&gt;-->
<!--&lt;!&ndash;					<div class="name">{{n.rna_type}} : </div>&ndash;&gt;-->
<!--				</div>-->
<!--			</div>-->
			<div class="overview2">
				<div class="item c1">
					<div class="num">{{overviewData.fnum}}</div>
					<div class="name">Virus family</div>
				</div>
				<div class="item c2">
					<div class="num">{{overviewData.snum}}</div>
					<div class="name">Virus species</div>
				</div>
				<div class="item c3">
					<div class="num">{{overviewData.hnum}}</div>
					<div class="name">Host</div>
				</div>
				<div class="item c4">
					<div class="num">{{overviewData.pnum}}</div>
					<div class="name">BIOPROJECT</div>
				</div>
				<div class="item c5">
					<div class="num">{{overviewData.sanum}}</div>
					<div class="name">sample</div>
				</div>
			</div>

		</div>

		<div class="title">
			Statistic data
		</div>

		<div class="content">
			<div class="left">
				<div :class="['item', qury.virusSpecies === n.virus_species ? 'active': '']" v-for="(n, idx) in species"
						 :key="idx" @click="speciesClick(n)">
					{{n.virus_species}}
				</div>
			</div>
			<div class="right">
				<div class="options">
					<div v-for="(n, idx) in options" :key="idx">
						<span class="name" @click="goChartView(n.type)">{{n.name}}</span>
						<span class="split" v-if="idx != (options.length-1)">/</span>
					</div>
				</div>
				<div>
					<rna-type-chart id="RNAtype" :virus-species="qury.virusSpecies"/>
					<host-chart id="Host" :virus-species="qury.virusSpecies"/>

<!--					<length-distr-chart id="Length" :virus-species="qury.virusSpecies" rnaType="mRNA"/>-->
					<length-distr-chart :virus-species="qury.virusSpecies" rnaType="lncRNA"/>
<!--					<length-distr-chart id="Length" :virus-species="qury.virusSpecies" rnaType="circRNA"/>-->
<!--					<length-distr-chart :virus-species="qury.virusSpecies" rnaType="sRNA"/>-->

				</div>
			</div>
		</div>
	</div>
</template>

<script>
  import {getOverview, getAllSpecies} from "@/api/statistic";
  import RnaTypeChart from "./components/rnaTypeChart";
  import HostChart from "./components/hostChart";
  import LengthDistrChart from "./components/lengthDistrChart";
  import {getVirusStatistic} from "../../api/statistic";

  export default {
    name: "host",
    components: {LengthDistrChart, HostChart, RnaTypeChart},
    data() {
      return {
        species: [],
        list: [],
        chart: null,
        qury: {
          virusSpecies: 'All the virus'
        },
        overviewData: {},
        options: [{name: "RNA type", type: "RNAtype"},
          {name: "Host", type: "Host"},
          {name: "Length distribution", type: "Length"}],
        rnaTypeInfo: {},
				rnaSort: ["mRNA", "lncRNA", "circRNA", "sRNA"],
      }
    },
    mounted() {
			this.loadVirusStatistic()
      this.loadOverviewData()
      this.loadSpeciesData()
    },
    methods: {

      async loadVirusStatistic () {
        const res = await getVirusStatistic({virusSpecies:null})
        this.rnaTypeInfo = this.sortByArr(res.data, this.rnaSort)
			},
      sortByArr(list, sortList) {
        // 进行排序
        let j = 9999
        list.map(n => {
          let idx = sortList.indexOf(n.rna_type)
          n.seq = idx > -1 ? (idx + 1) : j;
          j++;
        })

        list.sort((a,b) => {
          return a.seq - b.seq;
        });
        return list
      },
      async loadOverviewData() {
        const res = await getOverview()
        this.overviewData = res.data
      },
      async loadSpeciesData() {
        const res = await getAllSpecies()
        if (res) {
          res.data.unshift({virus_species: 'All the virus', isAll: true})
        }
        this.species = res.data
      },
      speciesClick(n) {
        this.qury.virusSpecies = n.virus_species
      },
      goChartView(id) {
        this.$nextTick(() => {
          // 实现滚动效果
          let top = document.documentElement.scrollTop
          console.log(id)
          let endY = document.getElementById(id).offsetTop
          const timeTop = setInterval(() => {
            document.body.scrollTop = document.documentElement.scrollTop = top += 20
            if (top >= endY) {
              clearInterval(timeTop);
            }
          }, 3);
        })
      },
    }
  }
</script>

<style lang="stylus" scoped>

	.main {
		width 1170px
		margin-top 20px
		padding-top 10px
		font-family: Times New Roman;

		.title {
			font-size 28px
			text-align left
			margin-bottom 20px
			padding 15px 0
			color #11427D
			font-weight 800
		}

		.overview {
			display flex
			justify-content space-evenly
			background: #f9f9f9;
			border-radius 10px
			margin 18px
			margin-bottom 50px

			.coreWarp2 {
				display flex
				flex-direction column
				justify-content center
				align-items center
				padding 40px 50px

				.name {
					font-size 18px
					font-weight 400
					color #0a2458
				}
				.value {
					font-size 34px
					font-weight 800
					color #0a2458
					margin-bottom 20px
				}
			}

			.coreWarp {
				border-radius 12px
				padding 40px 0 40px 0
				position: relative;

				.name {
					font-size 19px
					font-weight 400
					margin-bottom 20px
					padding 0 20px
					color #0a2458
				}
				.value {
					font-size 32px
					font-weight 800
					padding 0 80px
					color #0a2458
				}
			}
			.coreWarp:not(:first-child)::before {
				background-color: #e8e8e8;
				content: "";
				width: 1px;
				border-radius 1px
				height: 50px;
				position: absolute;
				top: calc(50% - 25px);
				left: -20px;
				transition: .2s ease;
			}
		}

		.overview2 {
			display flex
			justify-content space-evenly
			margin-bottom 50px
			//padding 0 30px

			.item {
				width 18%
				display flex
				flex-direction column
				padding 40px 30px
				border-radius 10px

				.num {
					font-size 32px
					font-weight 800
					text-align center
					margin-bottom 20px
				}

				.name {
					font-size 16px
					font-weight 400
					text-align center
					text-transform Uppercase
					font-family: Decimal-Medium_Web, sans-serif;
				}
			}

			.item:last-child {
				margin-right 0
			}

			.c1 {
				background-color #81D4fa
				color #004e95
				border 1px solid #74c8ef
			}

			.c2 {
				background-color #a5d6a7
				color #1c502d
				border 1px solid #98ca9b
			}

			.c3 {
				background-color #ffe082
				color #ff6f00
				border 1px solid #f4d575
			}

			.c4 {
        color: #bf360c;
        background-color: #ffab91;
        border: 1px solid rgba(0, 0, 0, 0.12);
			}

      .c5 {
        background-color #a65fa8
        color #fff
        border 1px solid #a341a8
      }
		}

		.options {
			display flex
			align-items center
			padding 15px 20px
			background-color #f9f9f9
			color #11427d
			border-radius 4px
			margin-bottom 30px

			.name {
				font-weight 600
				cursor pointer
			}

			.name:hover {
				text-decoration underline
			}

			.split {
				margin 0 10px
			}
		}

		.content {
			display flex
			flex 1
			min-height 250px

			.left {
				width: 360px;
				transition: padding-top .3s;
				overflow hidden
				height: calc(100vh);
				position sticky
				top 30px
				left 0

				.item {
					padding 15px
					margin-right 10px
					color #0064bc
					font-size 15px
					cursor pointer
				}

				.active, .item:hover {
					background-color #f9f9f9
					color #9c1919
					text-decoration underline
				}
			}

			.left:hover {
				overflow-y: auto;
			}

			/* 滚动条整体部分 */

			.left::-webkit-scrollbar {
				width: 10px;
				height: 10px;
			}

			.right /deep/ {
				flex 1
				padding 0 30px
				box-sizing: border-box;

				//设置图标颜色

				.el-loading-spinner .path {
					stroke: #11427D;
				}
			}
		}
	}
</style>
